import { Button, Flex, Form, Input, Select, message, Popconfirm } from 'antd'
import jiaoyi from '@/assets/images/search/jiaoyi@2x.png'
import yonghu from '@/assets/images/search/yonghu@2x.png'
import "./index.scss"
import { useLocation } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { calculationAPI } from '@/apis'
import { SyncOutlined } from '@ant-design/icons'
const { Option } = Select
export default function SearchBar({ onFinish, shape, showPreloadButton = true }) {
    const { state } = useLocation()
    const [messageApi, contextHolder] = message.useMessage();
    const [isloading, setisloading] = useState(false)
    const preloadData = () => {
        setisloading(true)
        calculationAPI().then((res)=>{
            if (res.code == 200){
                messageApi.open({
                    type: 'success',
                    content: res.message,
                });
            }else{
                messageApi.open({
                    type: 'error',
                    content: res.message,
                });
            }
            setisloading(false)
        }).catch(()=>{
            messageApi.open({
                type: 'error',
                content: '数据预载失败！',
            });
            setisloading(false)
        })
    }
    const confirm = e => {
        preloadData()
    };
    const cancel = e => {
        console.log(e);
    };
    return (
        <Flex vertical style={{ width: '100%', margin: '0 auto' }}>
            <Form className='form-area' onFinish={onFinish}>
                <Form.Item name='type' initialValue="duishou">
                    <Select className='select'>
                        <Option value='duishou'>
                            <div className='option'>
                                <img src={yonghu} alt='' />
                                <p>企业名称</p>
                            </div>
                        </Option>
                        <Option value='jituan'>
                        <div className='option'>
                            <img src={yonghu} alt='' />
                            <p>集团名称</p>
                        </div>
                        </Option>
                        <Option value='erjidanwei'>
                        <div className='option'>
                            <img src={yonghu} alt='' />
                            <p>二级单位</p>
                        </div>
                        </Option>
                    </Select>
                </Form.Item>
                <Form.Item name="name" initialValue={state && state.searchInput ? state.searchInput : ''} className='input-area'>
                    <Input className='input' allowClear placeholder='请输入企业名称' size='large' />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" shape={shape} size='large' htmlType="submit">查一下</Button>
                </Form.Item>
            </Form>
            {showPreloadButton && (
            <Popconfirm
                title="开始预载"
                description="数据预载需要较长时间，确认预载？"
                onConfirm={confirm}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
            >
                <Button type="primary" style={{ width: '150px', alignSelf: 'center' }} loading={isloading && { icon: <SyncOutlined spin /> }}>
                    集团数据预载
                </Button>
            </Popconfirm>)}
        </Flex>
    )
}
